<template>
	<view class="page_wrapper">
		<view class="menus_block bottom_line">
			<view class="menu" @click="changeStatus('undo')">
				<view :class="{'active' : status === 'undo'}">待开发</view>
			</view>
			<view class="menu" @click="changeStatus('did')">
				<view :class="{'active' : status === 'did'}">已完成</view>
			</view>
		</view>
		<view class="data_list_block">
			<view class="dev_func_block bottom_line" v-for="(devFunc, index) in devFuncList" @tap="showDetail(devFunc)">
				<view class="first_row">
					<view class="dev_func_name">
						{{devFunc.funcName}}
					</view>
					<view>助力次数:{{devFunc.userCount}}</view>
				</view>
				<view class="second_row">
					<view class="create_user">创建者:{{devFunc.createUser.name}}</view>
					<block v-if="devFunc.status === 'undo'">
						<view class="assist_func">助力该功能</view>
					</block>
				</view>
			</view>
		</view>
		<view class="btns_block">
			<view class="fcz_btn add_btn" @tap="addNewDevFunc()">
				创建我的功能需求
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				funcType: 'math',
				status: 'undo',
				devFuncList: []
			}
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			changeStatus(s) {
				if(this.status === s) {
					return false
				}
				this.status = s
				this.fetchData()
			},
			fetchData() {
				this.devFuncList = []
				uni.showLoading()
				request.get( 
					'/devFuncs/search', 
					{
						'status' : this.status
					}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.devFuncList = res.items
					if(this.devFuncList.length === 0){
						uni.showToast({
							icon: 'none',
							title: '暂无数据'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			assistThisFunc(devFunc) {
				uni.showLoading()
				const $this = this
				request.putJson( 
					`/devFuncs/id,${devFunc.id}/assist`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					$this.devFuncList.forEach(item => {
						if(item.id === devFunc.id){
							item.status = 'did'
						}
					})
					uni.showToast({ icon: 'none', title: '助力成功' })
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			showDetail(devFunc) {
				uni.navigateTo({
					url: '/pages/devFuncList/showDetail/showDetail?devFuncId=' + devFunc.id
				})
			},
			addNewDevFunc() {
				// 先判断用户信息是否完善，不完善不让添加。
				const user = storageData.getLoginUser()
				if(!user.name) {
					uni.showToast({ icon: 'none', title: '请先在个人中心完善用户基本信息' })
					return false
				}
				uni.navigateTo({
					url: '/pages/devFuncList/addDevFunc/addDevFunc'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.menus_block{
			height: 50px;
			display: flex;
			.menu{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.menu > .active{
				font-weight: 500;
				height: 48px;
				line-height: 48px;
				padding-left: 20px;
				padding-right: 20px;
				border-bottom: 3px solid #36ab60;
			}
		}
		.data_list_block{
			flex: 1;
			padding: 0px 15px;
			overflow-y: scroll;
			.dev_func_block{
				padding: 15px;
				.first_row {
					display: flex;
					justify-content: space-between;
					.dev_func_name{
						font-size: 17px;
						font-weight: 500;
					}
				}
				.second_row{
					display: flex;
					justify-content: space-between;
					.create_user{
						font-size: 14px;
						color: #666666;
					}
					.assist_func{
						font-size: 14px;
						color: white;
						padding: 3px 8px;
						background-color: #36ab60;
						border-radius: 4px;
					}
				}
			}
		}
		.btns_block{
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			.fcz_btn{
				flex: 0.8;
				height: 40px;
				color: white;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
			}
			.add_btn{
				background-color: #67C23A;
			}
		}
	}

</style>
